<script>
import C1 from "./slots/1.vue";
import C2 from "./slots/2.vue";
import C3 from "./slots/3.vue";
import C4 from "./slots/4.vue";
import C5 from "./slots/5.vue";
import C6 from "./slots/6.vue";
import C7 from "./slots/7.vue";
import C8 from "./slots/8.vue";
import C9 from "./slots/9.vue";
import C10 from "./slots/10.vue";
import C11 from "./slots/11.vue";
export default {
  components: {
    C1,
    C2,
    C3,
    C4,
    C5,
    C6,
    C7,
    C8,
    C9,
    C10,
    C11,
  },
  props: ["node", "index", "showmessage"],
  data() {
    return {
      type: [null, "C1", "C2", "C3", "C4", "C5", "C6", "C7", "C8", "C9", "C10","C11"],
    };
  },
  watch: {
    "node.show": {
      handler(n, o) {
        if (!n) {
          this.node.answer instanceof Array
            ? this.node.answer.splice(0, this.node.answer.length)
            : null;

          typeof this.node.answer == "string"
            ? (this.node.answer = null)
            : null;
        }
      },
    },
  },
  render(h) {
    let Tag = this.type[this.node.type];
    let { currentNode, deleteNode, Node } = this.$listeners;
    let current = Node.call();
    return this.node.show ? (
      <el-col
        nativeOnClick={(e) => {
          currentNode(this.node);
          e.stopPropagation();
        }}
        class={[
          "draggable_item",
          current && current == this.node ? "active" : "",
        ]}
        span={this.node.span}
      >
        <i
          class="el-icon-delete "
          onClick={(e) => {
            deleteNode(this.node);
          }}
        ></i>
        <el-form-item
          size="small"
          prop={"formList." + this.index + ".answer"}
          class="label"
          label={this.node.num + "." + this.node.title}
          show-message={this.showmessage ? this.showmessage : false}
          rules={[{ required: this.node.require, message: "此选项为必填项" }]}
        >
          <div
            style="display:flex;"
            slot="label"
            domPropsInnerHTML={
              "<div>" +
              this.node.num +
              ".</div>" +
              "<div>" +
              this.node.title +
              "</div>"
            }
          ></div>
          <Tag node={this.node} />
          <div v-show={this.node.tip} class="tip">
            提示：{this.node.tip}
          </div>
        </el-form-item>
      </el-col>
    ) : null;
  },
};
</script>

<style scoped>
.tip {
  color: #f56c6c;
  font-size: 12px;
}
.draggable_item .label >>> .el-form-item__label {
  text-align: left;
  word-break: break-all;
  display: flex;
  line-height: 24px;
  margin-bottom: 20px;
  width: 100% !important;
}

.draggable_item >>> .wscnph {
  object-fit: contain;
  width: 100%;
  height: 100%;
}
.label {
  width: 100%;
}
.draggable_item >>> .el-form-item {
  display: flex;
  flex-direction: column;
}

.draggable_item {
  display: flex;
  justify-content: center;
  position: relative;
}
.el-form-item {
  cursor: move;
  border: 1px dashed gray;
  box-sizing: border-box;
  padding: 10px;
  padding-bottom: 10px;
  width: 98%;
  float: left;
  margin: 13px 0;
  margin-left: 0px;
}
.el-form-item:hover {
  background: #f3f9ff;
}
.draggable_item.active .el-form-item {
  background: #f3f9ff;
  border-radius: 4px;
}
.el-icon-delete {
  color: #f56c6c;
  position: absolute;
  right: 10px;
  top: 0px;
  font-size: 22px;
  cursor: pointer;
}
</style>